<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组合</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
  var sun = new Image();
  var moon = new Image();
  var earth = new Image();
  function init() {
    sun.src = 'images/Canvas_sun.png';
    moon.src = 'images/Canvas_moon.png';
    earth.src = 'images/Canvas_earth.png';
    window.requestAnimationFrame(draw);
  }

  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');

    ctx.globalCompositeOperation = 'destination-over';
    ctx.clearRect(0,0,300,300); // clear canvas

    ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
    ctx.strokeStyle = 'rgba(0,153,255,0.4)';

    // 保存当前状态
    ctx.save();
    // 平移变换
    ctx.translate(150, 150);

    // Earth
    var time = new Date();
    /**
     * getSeconds: 获取秒数
     * getMilliseconds: 获取毫秒数
     */
    ctx.rotate( ((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
    ctx.translate(105, 0);
    ctx.fillRect(0, -12, 50, 24); // Shadow
    ctx.drawImage(earth, -12, -12, 24, 24);

    // Moon
    ctx.save();
    /**
     * getSeconds: 获取秒数
     * getMilliseconds: 获取毫秒数
     */
    ctx.rotate( ((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
    ctx.translate(0, 28.5);
    ctx.drawImage(earth, -3.5, -3.5, 12, 12);
    ctx.restore();

    ctx.restore();

    ctx.beginPath();
    ctx.arc(150, 150, 105, 0, Math.PI*2, false); // Earth orbit
    ctx.stroke();

    ctx.drawImage(sun, 120, 120, 60, 60);

    window.requestAnimationFrame(draw);
  }

  init();
</script>
</body>
</html>
